/*
    Variables;
*/

:root {
    --orange-color: #EE7E31;
    --red-color: #E3382F;
    --grey-color:#333;
    --grey-blue-color:#6a6a75;
    --light-orange:#faebd7;
    --floral-white: #fffaf0;
  }
body{
    color: var(--grey-color);
}
body,.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-family: "Noto Sans",sans-serif;
}
.grid-container{
    max-width: 80rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
/* header Styles */
.logo{
    max-width: 220px;
    max-width: 200px;
}
#site-header{
    padding: 1.5em 1em;
}
#site-header .grid-container{
    padding: 0;
}
#site-navigation li a{
    font-size: 1em;
    padding: 1.5em 1em;
    text-transform: uppercase;
    color: #000;
    transition: all .3s ease;
    border-bottom:2px solid #ffF;
}
#site-navigation li a:hover{
    color: var(--red-color);
    border-bottom:2px solid var(--red-color);
}

/* End of Header */
main>section{
    padding: 3em 0;
    position: relative;
}
main>section::after{
    display: none;
    background-color: #ccc;
    height: 1px;
    width: 400px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 200px);
    content: " ";
}
/* hero Section */
main>section#hero{
    padding: 0;
    margin-bottom: 0;
    color: #ffF;
}
.hero-content{
    position: relative;
    z-index: 1;
    font-size: 10em;
    line-height: 0;
}
.hero-title{
    text-transform: uppercase;
    font-weight: 100;
    font-size: inherit;
    margin: 0;
    line-height: 1;
}
.hero-content em{
    font-size: .25em;
}

/* End of Hero */
/* Who We are */

#who-we-are::after, #our-mission::after{
    display: block;
}
/* End of Who we are */
/* Mission */
#our-mission .cell{
    border: 1px solid #999;
    margin-bottom: 4em;
    border-radius:15px 0 0 15px ;
    border-radius: 25px;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
}
#our-mission .cell figure{
    overflow: hidden;
    border-radius:15px 0 0 0 ;
    border-radius:25px 25px 0 0 ;
}
#our-mission .cell+.cell{
    border-left: none;
    border-radius:0 15px  15px  0;
    border-radius: 25px;
    border: 1px solid #999;
    border:none;
    box-shadow: 0 0 15px rgba(0,0,0,.2);
}
#our-mission .cell+.cell figure{
    overflow: hidden;
    border-radius:0 15px 0 0    ;
    border-radius:25px 25px 0 0 ;
}
/* End of Mission */

/* Management Section */
.profile-pic{
display: block;
padding: 2em 0;
} 
.profile-pic img{
    max-width: 170px;
    margin: auto;
    display: block;
    border-radius: 50%;
}
 #our-management h3{
    margin: 0;
 }
 #our-management p{
    margin: 0;
    padding: 1em 2em;
 }
/* End of management */
/* utilities */
.lh-1{
    line-height: 1;
}
.ptb-1rem{
    padding: 2rem 0 1rem 0;
}
.upper-title{
    text-transform: uppercase;
}
.fw-100{
    font-weight: 100;
}
.fw-200{
    font-weight: 200;
}
.fw-300{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}

.xl-size{
    font-size: 4.5em;
}
.l-size{
    font-size: 3em;
}
.m-size{
    font-size: 2.5em;
}
.orange-txt{
    color: var(--orange-color);
}
.red-txt{
    color: var(--red-color);
}
.grey-txt{
    color: var(--grey-color);
}
.grey-blue-txt{
    color: var(--grey-blue-color);
}
.content-cell{
    padding:  2em;
}
.antique-white-bg{
    background: var(--light-orange);
}
.floral-white-bg{
    background: var(--floral-white);
}
/* End of Utility Classes*/

#our-business h2{
    padding-bottom: .7em;
}
.business-services .cell{
    padding: 2em;
    
}

/* ipad portraite  */
@media all and (max-width:1125px){
    #site-navigation li a{
        font-size: .85em;
        padding: 2em .75em;
    }
}
@media all and (min-width:750px){
    main>section{
        padding: 4em 0;
    }
    .business-services .cell{
        padding-bottom: 4em;
        padding-right: 5em;
    }
    main>section#hero{
        margin-bottom: 4rem;
    }
    .l-size{
        font-size: 3.5em;
    }
    .content-cell{
        padding-right:5rem;
    }
}